<template>
    <div>
        <h4>编程式导航</h4>
        <ul>
            <li>通过JS代码控制路由切换，统称为编程式导航 => JS代码控制可以让导航切换伴随逻辑出现</li>
            <li>
                vue-router模块在 app.use 安装时，集成了 app.config.globalProperties.$router = router; 属性 <br>
                $routr属性记录了当前项目创建的路由对象，路由对象中包含了JS控制的导航切换方法 $router.go $router.back $router.push <br>
                $router.go(n) ==> 路由前进切换 ， n 表示切换到少层  <input type="button" value="前进2层" @click="goFun()"> <br>
                $router.back() ==> 路由后退切换(一层)  <input type="button" value="后退" @click="backFun()"> <br>
                $router.push(Path|Options) ==> 通过参数设置导航切换; Path取值String为导航地址 ; Options取值对象参数规则等同RouterLink to 属性对象模式
            </li>
        </ul>
        <pre>{{ user }}</pre>
        <div>
            <div>
                <label for="username" >用户名:</label>
                <input type="text" v-model="user.username">
            </div>
            <div>
                <label for="username" >密码:</label>
                <input type="text" v-model="user.password">
            </div>
            <div>
                <!-- <RouterLink :to="{ name:'success' }">success</RouterLink> -->
                <input type="button" value="登录" @click="doLogin()">
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                user:{
                    username:"",
                    password:""
                }
            }
        },
        methods: {
            goFun(){
                this.$router.go(2)
            },  
            backFun(){
                this.$router.back()
            },
            doLogin() {
                if(this.user.username!=""&&this.user.password!=""){
                    console.log("用户名密码存在")
                    // ajax登录请求
                    
                    // 异步请求响应成功后
                    // 跳转
                    // this.$router.push("/success")

                    // this.$router.push({
                    //     path:"/success",
                    // })

                    this.$router.push({
                        name:"success",
                    })
                }
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>